<!--
 * @Author: sbotlp
 * @Email: sbotlp@sina.com
 * @Date: 2019-11-17 17:01:50
 * @LastEditTime: 2019-11-17 17:23:31
 * @Description: http://www.sbotlp.com.cn
 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
  <div>需求：</div>
  <div>1、将该数据展示成一个表格</div>
  <div>2、随便改一个信息，表格特跟着改变</div>
  <pre>
  [
    {
      name: '张三',
      age: 20,
      address: '北京'
    },
    {
      name: '李四',
      age: 21,
      address: '上海'
    },
    {
      name: '王五',
      age: 22,
      address: '广州'
    }
  ]
  </pre>
  <div id="container"></div>
  <button id="btn-change">change</button>
  <script>
    var data =   [
      {
        name: '张三',
        age: 20,
        address: '北京'
      },
      {
        name: '李四',
        age: 21,
        address: '上海'
      },
      {
        name: '王五',
        age: 22,
        address: '广州'
      }
    ];
    // 渲染函数
    function render(data){
      var $container = $('#container');
      // 先清空内容，防止追加
      $container.html('');
      // 拼接
      var $table = $('<table>');
      $table.append($('<tr><td>名字</td><td>年龄</td><td>所在地</td></tr>'));
      data.forEach(item => {
        $table.append($('<tr><td>' + item.name + '</td><td>' + item.age + '</td><td>' + item.address + '</td></tr>'))
      });
      // 渲染, 放到最后，提高性能，减少渲染次数
      $container.append($table);
    };

    $('#btn-change').click(function() {
      data[1].age = 30;
      data[2].address='深圳';
      // re-render 再次渲染
      render(data)
    })

    // 页面加载完立即渲染（初次渲染）
    render(data);
  </script>
</body>
</html>